<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>

<body>

    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
    </div>

    <script>
        // 用于创建 <p> 元素:
        var para = document.createElement("p");
        // 为 <p> 元素创建一个新的文本节点：
        var node = document.createTextNode("这是一个新的段落。");
        // 将文本节点添加到 <p> 元素中：
        para.appendChild(node);
        // 查找已存在的元素：
        var element = document.getElementById("div1");
        // 添加到已存在的元素中(添加新元素到尾部):
        element.appendChild(para);
    </script>

    <!-- 移除已存在的元素 -->
    <div id="div2">
        <p id="p3">这是一个段落。</p>
        <p id="p4">这是另外一个段落。</p>
    </div>
    <script>
        // DOM 需要清楚您需要删除的元素，以及它的父元素。
        var parent = document.getElementById("div2");
        var child = document.getElementById("p3");
        parent.removeChild(child);
    </script>

    <!-- 替换 HTML 元素 - replaceChild() -->
    <div id="div3">
        <p id="p5">这是一个段落。</p>
        <p id="p6">这是另外一个段落。</p>
    </div>
    <script>
        var para = document.createElement("p");
        var node = document.createTextNode("这是一个新的段落。");
        para.appendChild(node);

        var parent = document.getElementById("div3");
        var child = document.getElementById("p5");
        parent.replaceChild(para, child);
    </script>
</body>

</html>